<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="../../WEB-INF/template.xhtml"
                xmlns:framework="http://java.sun.com/jsf/composite/components">
    <ui:define name="title">Resource Page</ui:define>
    <ui:define name="content">
        <h:form id="resource_form">
            <div class="ui-g sample-layout">
                <div class="ui-g-12">
                    <p:treeTable id="resource_tree_table"
                                 widgetVar="resource_tree_table" selectionMode="single"
                                 selection="#{viewScope.selectedNode}"
                                 value="#{viewScope.resources}" var="element"
                                 emptyMessage="#{msg['framework']['noRecords']}">
                        <f:facet name="header">
                            <p:outputPanel style="text-align: left;">
                                <div class="ui-inputgroup" style="display: inline;">
                                    <p:inputText id="globalFilter" placeholder="Enter Keyword"
                                                 onkeyup="PF('dictionary_table').filter()"/>
                                    <p:commandButton value="Search" icon="fa fa-search"/>
                                </div>
                                <p:commandButton id="operationButton"
                                                 value="#{msg['framework']['operation']}" type="button"
                                                 icon="fa fa-chevron-down"/>
                                <p:tieredMenu overlay="true" trigger="operationButton"
                                              my="left top" at="left bottom">
                                    <p:menuitem id="add" value="#{msg['framework']['add']}"
                                                icon="fa fa-plus" actionListener="#{controller.add}"
                                                update=":resource_dialog_form"
                                                oncomplete="PF('resource_dialog').show()"/>

                                    <p:menuitem id="edit" value="#{msg['framework']['edit']}"
                                                onclick="if(!isSelectedRecord('resource_tree_table')) return false "
                                                actionListener="#{controller.edit}" icon="fa fa-fw fa-edit"
                                                oncomplete="PF('resource_dialog').show()"
                                                update=":resource_dialog_form"/>
                                    <p:separator/>
                                    <p:menuitem id="delete" value="#{msg['framework']['delete']}"
                                                onclick="if(!isSelectedRecord('resource_tree_table')) return false"
                                                action="#{controller.delete}" icon="fa fa-fw fa-remove"
                                                update="resource_tree_table">
                                        <p:confirm header="提示" message="确定删除？"/>
                                    </p:menuitem>
                                </p:tieredMenu>
                            </p:outputPanel>
                        </f:facet>
                        <p:column headerText="#{msg['resource']['code']}">
                            <h:outputText value="#{element.code}"/>
                        </p:column>
                        <p:column headerText="#{msg['resource']['name']}">
                            <h:outputText value="#{element.name}"/>
                        </p:column>
                        <p:column headerText="#{msg['resource']['icon']}">
                            <h:outputText value="#{element.icon}"/>
                        </p:column>
                        <p:column headerText="#{msg['resource']['type']}">
                            <h:outputText value="#{element.type}"/>
                        </p:column>
                        <p:column headerText="#{msg['resource']['url']}">
                            <h:outputText value="#{element.url}"/>
                        </p:column>
                    </p:treeTable>
                </div>
            </div>
        </h:form>
    </ui:define>
    <ui:define name="dialog">
        <h:form id="resource_dialog_form">
            <framework:entityDialog id="resource_dialog"
                                    widgetVar="resource_dialog" responsive="true"
                                    saveDisabled="#{viewScope.resource == null}"
                                    saveUpdate=":resource_form:resource_tree_table">
                <f:facet name="header">
                    <h:outputText rendered="#{viewScope.resource.id != null}" value="#{msg['framework']['add']}"/>
                    <h:outputText rendered="#{viewScope.resource.id == null}" value="#{msg['framework']['edit']}"/>
                </f:facet>


                <p:panelGrid columns="2" rendered="#{viewScope.resource != null}"
                             columnClasses="ui-g-12 ui-md-3,ui-g-12 ui-md-9" layout="grid"
                             styleClass="ui-fluid"
                             style="border:0px none; background-color:transparent;">
                    <h:outputText value="#{msg['resource']['parentNode']}"/>
                    <p:fragment>
                        <p:outputPanel id="parent_panel" class="ui-inputgroup">
                            <p:inputText id="parent_input" readonly="true"
                                         value="#{viewScope.selectedNode.data.name}"/>
                            <p:commandLink class="ui-inputgroup-addon"
                                           update="parent_panel,tree_panel">
                                <i class="fa fa-times"></i>
                                <p:resetInput target="resource_tree" resetValues="true"/>
                            </p:commandLink>
                        </p:outputPanel>
                        <p:overlayPanel id="tree_panel" widgetVar="tree_panel"
                                        dynamic="true" for="parent_input" hideEffect="fade"
                                        showEffect="fade">
                            <p:tree id="resource_tree" value="#{viewScope.parents}"
                                    var="node" datakey="#{node.id}"
                                    style="border: 0px;padding: 0px;" selectionMode="single"
                                    selection="#{viewScope.selectedNode}">
                                <p:ajax event="select" listener="#{controller.onSelectParent}"
                                        oncomplete="PF('tree_panel').hide()"
                                        update="@parent,:resource_dialog_form:resource_dialog:parent_panel"/>
                                <p:treeNode>
                                    <h:outputText value="#{node.name}"/>
                                </p:treeNode>
                            </p:tree>
                        </p:overlayPanel>
                    </p:fragment>
                    <h:outputText value="#{msg['resource']['icon']}"/>
                    <p:fragment>
                        <p:outputPanel id="icon_plane" styleClass="ui-inputgroup">
                            <p:inputText id="icon_input" widgetVar="icon_input"
                                         readonly="true" value="#{viewScope.resource.icon}"
                                         onclick="panelWidth()"/>
                            <p:commandLink class="ui-inputgroup-addon" update="icon_plane">
                                <i class="fa fa-times"></i>
                                <p:resetInput target="icon_input" resetValues="true"/>
                            </p:commandLink>
                        </p:outputPanel>
                        <p:overlayPanel widgetVar="icon_panel" id="icon_panel"
                                        for="icon_input" hideEffect="fade">
                            <p:outputPanel layout="block" style="width:300px">
                                <p:inputText onkeyup="onFilter(event)"
                                             placeholder="Search an icon"
                                             style="width:100%; margin: 16px 0px 26px;"/>
                                <div class="p-grid icons-gird"
                                     style="overflow: overlay; max-height: 300px;">
                                    <ui:repeat value="#{viewScope.icons}" var="icon">
                                        <div class="p-col-6 p-md-6 p-lg-4 icon-container"
                                             onclick="PF('icon_panel').hide()" data-name="#{icon.name}"
                                             data-key="#{icon.key}">
                                            <p:commandLink>
                                                <i class="pi pi-#{icon.name}"></i>
                                                <div>#{icon.name}</div>
                                                <f:setPropertyActionListener value="#{icon.name}"
                                                                             target="#{viewScope.resource.icon}"/>
                                            </p:commandLink>
                                        </div>
                                    </ui:repeat>
                                </div>
                            </p:outputPanel>
                        </p:overlayPanel>
                    </p:fragment>
                    <h:outputText value="#{msg['resource']['type']}"/>
                    <p:selectOneButton widgetVar="type"
                                       value="#{viewScope.resource.type}" unselectable="false">
                        <f:selectItems value="#{viewScope.types}" var="type"
                                       itemLabel="#{type.name}" itemValue="#{type}"/>
                        <p:ajax
                                update=":resource_dialog_form:resource_dialog:contentPanel"/>
                    </p:selectOneButton>
                    <h:outputText value="#{msg['resource']['code']}"/>
                    <p:inputText value="#{viewScope.resource.code}"/>
                    <h:outputText value="#{msg['resource']['name']}"/>
                    <p:inputText value="#{viewScope.resource.name}"/>
                    <h:outputText value="#{msg['resource']['url']}"
                                  rendered="#{viewScope.resource.type != 'MODULE'}"/>
                    <p:inputText value="#{viewScope.resource.url}"
                                 rendered="#{viewScope.resource.type != 'MODULE'}"/>
                    <h:outputText value="#{msg['resource']['permission']}"
                                  rendered="#{viewScope.resource.type != 'MODULE'}"/>
                    <p:inputText value="#{viewScope.resource.permission}"
                                 rendered="#{viewScope.resource.type != 'MODULE'}"/>
                    <h:outputText value="#{msg['resource']['button']}"
                                  rendered="#{viewScope.resource.type == 'PAGE'}"/>
                    <p:panelGrid id="buttons" columns="3"
                                 rendered="#{viewScope.resource.type == 'PAGE'}"
                                 columnClasses="ui-g-12 ui-md-4 ui-g-nopad,ui-g-12 ui-md-4 ui-g-nopad,ui-g-12 ui-md-4 ui-g-nopad"
                                 layout="grid">
                        <c:forEach items="#{viewScope.buttons}" var="button"
                                   varStatus="status">
                            <p:selectBooleanCheckbox style="width:auto;"
                                                     value="#{button.enable}" itemLabel="#{button.name}">
                            </p:selectBooleanCheckbox>
                        </c:forEach>
                    </p:panelGrid>

                    <h:outputText value="#{msg['resource']['remark']}"/>
                    <p:inputTextarea value="#{viewScope.remark}" autoResize="false"/>
                </p:panelGrid>

            </framework:entityDialog>
        </h:form>
    </ui:define>
</ui:composition>